<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>不同设备用户支付确认率</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <style>
        .chart-container {
            max-width: 800px;
            margin: 2rem auto;
            padding: 1.5rem;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body class="bg-gray-50">
<div class="chart-container">
    <h2 class="text-xl font-bold mb-4">不同设备用户支付确认率</h2>
    <div class="h-80">
        <canvas id="deviceConfirmChart"></canvas>
    </div>
</div>

<script>
    // 准确数据：不同设备支付确认率（从支付页到确认页）
    const deviceConfirmData = [
        { device: "桌面端", confirm_rate: 0.37418181818181817 },
        { device: "其他设备", confirm_rate: 0.2857142857142857 },
        { device: "移动端", confirm_rate: 0.33447015834348354 }
    ];

    document.addEventListener("DOMContentLoaded", () => {
        new Chart(document.getElementById("deviceConfirmChart"), {
            type: "bar",
            data: {
                labels: deviceConfirmData.map(d => d.device),
                datasets: [{
                    label: "支付确认率 (%)",
                    data: deviceConfirmData.map(d => (d.confirm_rate * 100).toFixed(2)),
                    backgroundColor: ["#10B981", "#6B7280", "#F59E0B"],
                    borderRadius: 4,
                    barPercentage: 0.6
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 40,
                        ticks: { callback: v => v + "%" },
                        title: { display: true, text: "支付确认率" }
                    }
                },
                plugins: {
                    tooltip: {
                        callbacks: { label: l => `${l.dataset.label}: ${l.raw}%` }
                    }
                },
                animation: { duration: 1500, easing: "easeOutQuart" }
            }
        });
    });
</script>
</body>
</html>